@charset "utf-8";
/* CSS Document */

body {
    margin: 0;
    padding: 0;
    height:100vh;
    display: flex;
    flex-direction:column;
    align-items:center; 
}
/* a {
    target:"_blank";
} */


/* 
display:flex    设置本元素为flex容器

flex-direction 规定主轴方向 默认：row
    row 定位左上角，向右为主轴，向下为交叉轴
    row-reverse 定位右上角，向左为主轴，向下为交叉轴
    column  定位左上角，向右为交叉轴，向下为主轴
    column-reverse  定位左下角，向上为主轴，向右为交叉轴

gap:10px    设置 flex 子容器间距

justify-content: flex子项的 主轴 排列方式
https://www.runoob.com/cssref/css3-pr-justify-content.html

flex-direction: 属性规定灵活项目的方向
https://www.runoob.com/cssref/css3-pr-flex-direction.html

align-content：flex子项的 交叉轴 排列方式
https://www.runoob.com/cssref/css3-pr-align-content.html

align-items 定义 flex 子项在 flex 容器的当前行的交叉轴方向上的对齐方式
https://www.runoob.com/cssref/css3-pr-align-items.html


margin: 0;  设置所有外边距属性
https://www.runoob.com/cssref/pr-margin.html

padding: 0; 设置所有填充属性
https://www.runoob.com/cssref/pr-padding.html

align-self: 定义flex单独子项的（纵轴）对齐方式。
https://www.runoob.com/cssref/css3-pr-align-self.html

flex-wrap 规定flex容器是单行或者多行
https://www.runoob.com/cssref/css3-pr-flex-wrap.html

text-align: 指定 文本的水平对齐方式。
https://www.runoob.com/cssref/pr-text-text-align.html

*/


/* 横向平铺 */
.hx {
    display:flex;
    justify-content:flex-start;
}

/* 纵向平铺 */
.zx {
    display:flex;
    flex-direction:column;
}

/* 顶端对齐 */
.dddq {
    display: flex; 
    align-items: flex-start; 
}

/* 左右居中 */
.zyjz {
    display: flex; 
    justify-content:center;
}


/* 上下居中 */
.sxjz {
    display: flex; 
    align-items:center;
}

/* 目录 */
.ml {
    margin: 10px;
    width: 80%;
    height: 40px;
    /* background-color: antiquewhite; */
    display: flex; 
    justify-content:center;
    align-items:center;
}

/* 导航标签 */
.bq {
    width: 200px;
    height: 75px;
    background-color: antiquewhite;
    margin: 10px; 
    border-radius: 5px;
}

/*以下为边框造型*/
.fieldset {
    width: 96%;
    min-height: 50px;
    border-radius: 5px;
    text-align: left;
    border: 2px solid #4fbaba;
}


.legend {
    position: relative;
    text-align: left;
    padding: 0 10px;
    font-size: 20px;
}

/*legend:before, legend:after{content:''; display:table;position:absolute;top:0;width:20px; height:20px;border-radius:10px;background:#4fbaba;}
		legend:before{left:0;}
		legend:after{ right:0;}	*/
/*以上为边框造型*/


input[type="text"],
input[type="email"] {
    width: 300px;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    border: 2px solid #cccccc;
    transition: border-color 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus {
    border-color: #0088cc;
    outline: none;
}



